<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Websocket测试</title>
</head>

<body>

<h1>WebSocket测试</h1>
<p>此案例前端是使用JS实现，Vue实现请看：https://juejin.im/post/5b7fd02d6fb9a01a196f6276</p>

<input id="text" type="text" />
<button onclick="send()">发送消息</button>

<button onclick="subscribe1()">订阅一推一</button>
<button onclick="subscribe2()">订阅一推多</button>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>

<hr>
<h4>接收到的后台推送:</h4>
<div id="message"></div>
</body>

<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>

<script type="text/javascript">
    // 建立连接对象（还未发起连接）
    var socket = new SockJS("http://localhost:8086/ws");

    // 获取 STOMP 子协议的客户端对象
    var stompClient = Stomp.over(socket);

    // 向服务器发起websocket连接并发送CONNECT帧
    stompClient.connect(
        {},
        function connectCallback(frame) {
            // 连接成功时（服务器响应 CONNECTED 帧）的回调方法
            console.log('连接WebSocket成功....');
            // 将消息显示在网页上
            setMessageInnerHTML('连接WebSocket成功....');
        },
        function errorCallBack(error) {
            // 连接失败时（服务器响应 ERROR 帧）的回调方法
            console.log('连接WebSocket失败.....');
            // 将消息显示在网页上
            setMessageInnerHTML('连接WebSocket失败.....');
        }
    );

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        var messageJson = JSON.stringify({ "message": message });
        stompClient.send("/app/messages/action/send", {}, messageJson);
        setMessageInnerHTML("你发送的消息:" + message);
    }

    // 订阅一推一
    function subscribe1() {
        stompClient.subscribe('/app/user/1/queue/messages', function (response) {
            // 后台推送消息才进行此回调
            var returnData = JSON.parse(response.body);
            // 将消息显示在网页上
            setMessageInnerHTML(returnData.responseMessage);
        });
    }

    // 订阅一推多
    function subscribe2() {
        stompClient.subscribe('/app/topic/messages', function (response) {
            // 后台推送消息才进行此回调
            var returnData = JSON.parse(response.body);
            // 将消息显示在网页上
            setMessageInnerHTML(returnData.responseMessage);
        });
    }


    //关闭websocket连接
    function closeWebSocket() {
        stompClient.disconnect();
        setMessageInnerHTML("websocket连接已关闭......")
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
</script>

</html>